<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%--
  Created by IntelliJ IDEA.
  User: macbookpro
  Date: 2023/11/28
  Time: 21:13
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>搜索页面</title>
    <link rel="stylesheet" href="css/Dou.css">
    <link rel="stylesheet" href="css/sousuo.css">
    <link rel="stylesheet" href="css/page.css">
    <script src="js/jquery-3.6.0.js"></script>
    <link rel="shortcut icon" href="https://static.arkread.com/ark/pics/favicon/favicon.ba37640e.ico" type="image/x-icon"/>
    <link rel="mask-icon" href="https://static.arkread.com/ark/pics/favicon/safari-mask-icon.714e3ee0.svg" color="#5795aa"/>
    <style>
        body{
            background: #f8f9f9;
            color:#333;
        }
        .list-item-image a{
            display: block;
            width: 100%;
            height: 100%;
            position: relative;
            z-index:100
        }
        .active{
            background-color: #389eac;
            color: #fff;
        }
        #header-compact-v3 .nav-user{
            position: relative;
            display: flex;
            justify-content: center;
            align-items: center;
            width: 40px;
            height: 50px;
            margin-right: -20px;
        }
        #header-compact-v3 .header-inner a:not([class^=btn]){
            color:#333;
        }
        #header-compact-v3 .nav-user .avatar{
            overflow: hidden;
            width: 30px;
            height: 30px;
            border-radius: 30px;
        }
        .header-inner a{
            cursor: pointer;
        }
        .avatar{
            position: relative;
        }
        a.avatar::after{
            position:absolute;
            top:0;
            right:0;
            bottom: 0;
            left:0;
            border-radius: 100px;
            background: #000;
            content: '';
            opacity: 0;
            transition: opacity .1s ease-in;
        }
        #header-compact-v3 .nav-user .avatar img{
            width: 100%;
            vertical-align: top;
            object-fit: cover;
        }
        .avatar img{
            display: block;
            width: 100%;
            border-radius: 100px;
        }
        img{
            border: none;
            vertical-align: middle;
            -ms-interpolation-mode: bicubic;
        }
        #header-compact-v3 .more-active:hover .drop-down-list{
            display: block;
        }
        #header-compact-v3 .nav-user .drop-down-list{
            top:50px;
        }
        .drop-down-list{
            position:absolute;
            right: 0;
            z-index: 200;
            padding: 10px 0;
            min-width: 120px;
            max-width: 130px;
            background: #fff;
            box-shadow: 0 1px 3px 0 rgba(0,0,0,0.1);
            text-align: left;
            display: none;
        }
        .drop-down-list::before{
            position: absolute;
            margin-top: -22px;
            width: 100%;
            height: 12px;
            content: '';
        }
        #header-compact-v3 .more-active .drop-down-list a{
            color: #333;
        }
        .header-inner{
            cursor: pointer;
        }
        .drop-down-list a{
            position: relative;
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 0 9px;
            white-space: nowrap;
            line-height: 25px;
        }
        .drop-down-list a:hover {
            background-color: #abcdef;
        }
    </style>
</head>
<body>
<%
    String inputValue=request.getParameter("inputValue");
    String elementId=request.getParameter("elementId");
    String username = (String) request.getSession().getAttribute("username");
%>
<div id="header-container">
    <header id="header-compact-v3" class="pre-rendered-header should-stick">
        <div class="header-inner">
            <a href="#" title="豆瓣阅读" class="site-logo"></a>
            <nav class="func-nav">
                <ul>
                    <li>
                        <button title="分类" class="nav-category fill-current-color">
                            <svg xmlns="http://www.w3.org/2000/svg" width="10" height="7" viewBox="0 0 10 7">
                                <path fill="#a6a6a6"
                                      d="M0 0h10v.7H0zm0 2.1h10v.7H0zm0 2.1h10v.7H0zm0 2.1h10V7H0z"></path>
                            </svg><span class="text">分类</span>
                        </button>
                    </li>
                    <li>
                        <button id="btn" onclick="toggle()" title="搜索" class="nav-category fill-current-color">
                            <svg xmlns="http://www.w3.org/2000/svg" width="14" viewBox="0 0 14 14">
                                <path fill="#a6a6a6"
                                      d="M14 12.83l-2.19-2.19a6.61 6.61 0 10-1.17 1.17L12.83 14zM2.5 10.7a5.8 5.8 0 018.2-8.2 5.8 5.8 0 01-8.2 8.2z"></path>
                            </svg><span class="text">搜索</span>
                        </button>
                    </li>
                </ul>
            </nav>
            <!-- 头部中间部分 -->
            <div class="site-nav-container">
                <nav class="site-nav site-nav-normal" id="myElement">
                    <ul class="nav-list">
                        <li class="nav-item-original">
                            <a href="#">原创</a>
                        </li>

                        <li class="nav-item-chart">
                            <a href="#">排行</a>
                        </li>

                        <li class="nav-item-ebook">
                            <a href="#">出版</a>
                        </li>
                        <li class="nav-item-ebook">
                            <a href="#">会员</a>
                        </li>

                        <li class="nav-item-ebook">
                            <a href="#">APP</a>
                        </li>
                    </ul>
                </nav>
            </div>

            <div id="nav-submit" class="nav-submit">
                <a href="#" class="lnk-start-publish fill-current-color">成为作者</a>
            </div>

            <nav class="site-nav-right">
                <ul>
                    <li class="nav-bookshelf">
                        <a href="#" title="书架" aria-label="书架" class="require-login">
                            <svg xmlns="http://www.w3.org/2000/svg" width="24" viewBox="0 0 24 24"
                                 class="fill-current-color">
                                <path fill="#a6a6a6"
                                      d="M13.9 5.223l3.14 12.1a.23.23 0 00.284.165l2.332-.645a.233.233 0 00.162-.28l-3.14-12.1a.23.23 0 00-.284-.166l-2.332.645a.233.233 0 00-.162.28zM8.5 5h-3v12h3zm1 12h3V3h-3v14zm4-9.327V14.5h1.77zm0-3.57a1.212 1.212 0 01.293-.125l2.33-.645a1.232 1.232 0 011.516.86v.018l3.136 12.1a1.23 1.23 0 01-.863 1.5l-2.33.647a1.232 1.232 0 01-1.516-.86v-.018l-.537-2.08H13.5V17a1 1 0 01-1 1h-3a1 1 0 01-.5-.134 1 1 0 01-.5.134h-3a1 1 0 01-1-1v-1.5H1.822a.23.23 0 00-.23.227l-.074 5.04a.23.23 0 00.23.233h20.506a.23.23 0 00.228-.234l-.074-5.04a.23.23 0 00-.23-.226h-1.59l-.268-1h1.858a1.23 1.23 0 011.23 1.213l.074 5.038A1.23 1.23 0 0122.27 22H1.75a1.23 1.23 0 01-1.232-1.23v-.02l.074-5.037a1.23 1.23 0 011.23-1.213H4.5V5a1 1 0 011-1h3V3a1 1 0 011-1h3a1 1 0 011 1z"></path>
                            </svg>
                        </a>
                    </li>
                </ul>
            </nav>

            <!-- 第四部分 -->
            <div class="user-info" id="user-info">
                <div class="login-buttons">
                    <a href="#" data-size="sx" class="btn-contained login">
                        <span class="text">登录 / 注册</span>
                    </a>
                </div>
            </div>
        </div>
    </header>
</div>
<div class="main" style="margin-top:150px;">
    <form action="#" id="submitMessage">
     <section class="search">
        <div class="search-icon" style="padding-top:3px">
            <img src="images/sousuo-2.png" alt="" style="width: 30px;height: 30px">
        </div>
        <input type="text" placeholder="请输入书名或作者" id="message" name="message">
        <div class="search-btn">
            <button type="button" id="submit" onclick="find(event)">搜索</button>
        </div>
     </section>
    </form>
    <div class="keywords" style="margin-top: 40px">
        包含<span class="keywords-red" id="conta"></span>的搜索结果<span>&nbsp;</span><span class="keywords-gray" id="count" style="color: red">&nbsp;</span>
    </div>
    <div class="tab">
        <ul id="tab" >
            <li>
                <a href="#" onclick="find(event)" id="submit1" class="active">综合</a>
            </li>
            <li>
                <a href="#" id="sortByHot" onclick="find(event)">热度最高</a>
            </li>
            <li>
                <a href="#" id="sortByRemark" onclick="find(event)">好评最多</a>
            </li>
        </ul>
    </div>
    <div>
        <ul class="list" id="bookList">
            <c:forEach items="${bookList}" var="value">
                <li class="list-item" id="${value.id+1}">
                    <div class="list-item-flex">
                        <div class="list-item-image">
                            <a href="https://www.baidu.com">
                                <img src="${value.bookImage}" alt="">
                            </a>
                        </div>
                        <div class="list-item-text">
                            <div class="list-item-text-title" id="bookName">${value.bookName}</div>
                            <div class="list-item-text-name" id="bookAuthor">${value.author}</div>
                            <div class="list-item-text-desc">${value.snopsis}</div>
                            <div class="list-item-text-tag">
                                <span>${value.mainSignature}</span>
                                <span>${value.signature2}</span>
                                <span>${value.signature3}</span>
                            </div>
                        </div>
                    </div>
                    <div class="list-item-btn">
                        <button type="button" id="addToBookshelf">加入书架</button>
                    </div>
                </li>
            </c:forEach>
        </ul>
    </div>
</div>
<div style="text-align: center;margin:50px auto;">
    <div id="pager" class="pager clearfix">
    </div>
</div>
<div class="footer">
    <div class="footer-content">
        <div class="footer-item">
            <a href="#">联系我们</a>
        </div>
        <div class="footer-item">
            <a href="#">帮助中心</a>
        </div>
        <div class="footer-item">
            <a href="#">官方微博</a>
        </div>
        <div class="footer-item">
            <a href="#">移动客户端</a>
        </div>
        <div class="footer-item">
            <a href="#">来这里工作</a>
        </div>
    </div>
    <div class="copyright">
        <a href="#"></a>
    </div>
</div>
</body>
<script src="js/jquery.z-pager.js"></script>
<script src="js/sousuo.js"></script>
<script>
    $("#pager").zPager({
        totalData: 50,
        pageStep: 5,
        htmlBox: $('#wraper'),
        btnShow: true,
        ajaxSetData: false
    });

    function currentPage(currentPage){
        /*
            触发页码数位置： Page/js/jquery.z-pager.js 64行
        */
        console.log("当前页码数：" + currentPage);
    }
    //从后端加载数据，并且实现一些数据的回填
    $(document).ready(function (){
        let container=document.getElementById('conta');//包含...的搜索结果
        let count=document.getElementById('count');//条数
       var inputValue='<%=inputValue %>';
       var elementId='<%=elementId%>';
       container.textContent=inputValue;
       $('#message').val(inputValue);
       $.ajax({
           type:"GET",
           url:"find/booksByAuthor",
           data:{inputValue:inputValue,elementId:elementId},
           success:function (data){
               $('#bookList').empty();
               count.textContent=data.length;
              for(var i=0;i<data.length;i++){
                   $('#bookList').append(`<li class="list-item" id="`+data[i].id+`">`+
                `<div class="list-item-flex">
                    <div class="list-item-image">
                        <a href="/find/findBookDetail?bookId=`+data[i].id+`">`+
                            `<img src="`+data[i].bookImage+`" alt="" id="bookImage"></a></div><div class="list-item-text"><div class="list-item-text-title" id="bookName">`+data[i].bookName+`</div>
                        <div class="list-item-text-name" id="bookAuthor">`+data[i].author+`</div>
                        <div class="list-item-text-desc">`+data[i].snopsis+`</div>
                        <div class="list-item-text-tag">
                            <span>`+data[i].mainSignature+`</span>
                            <span>`+data[i].signature2+`</span>
                            <span>`+data[i].signature3+`</span>
                        </div>
                    </div>
                </div>
                <div class="list-item-btn">
                    <button type="button" id="addToBookshelf" onclick="addToBookshelf(event)">加入书架</button>
                </div>
            </li>`)
              }
           },
           error:function (error){
               console.log(error);
           }
       })
    })
    //对添加到书架的一个监听事件
    function addToBookshelf(event){
        //获取需要加载到数据库中的数据
        var bookId=event.target.closest('.list-item').id;//获取当前点击的button的父亲元素的id值
        var bookIdElement=document.getElementById(bookId);
        var button=bookIdElement.querySelector('#addToBookshelf');
        var data={
            username:'<%=username%>',
            bookName:$('#'+bookId+' #bookName').text(),
            bookAuthor:$('#'+bookId+' #bookAuthor').text(),
            bookImage:bookIdElement.querySelector('img').src,
        }
        $.ajax({
            type:"POST",
            url:"/bookshelf/add",
            data:JSON.stringify(data),
            dataType:"json",
            contentType:"application/json;charset=UTF-8",
            success:function (data){
                console.log(data);
                if(data===0){
                    cocoMessage.error('已在书架',2000);
                    console.log('success');
                }else{
                    cocoMessage.success('加入成功',2000);
                }
                button.disabled=true;
                button.style.backgroundColor = '#d3d3d3';
                button.innerText = '已在书架';
            },
            error:function (error){
                console.log(error);
            }
        })
    }
    $(document).ready(function (){
        let username='<%=username%>';
        console.log(username);
        if (username==='null') {//当前尚未登录
            console.log('success2');
            $('#user-info').empty();
            $('#user-info').append('<div class="login-buttons">'+'<a href="userLogin.jsp" data-size="sx" class="btn-contained login">'+
                '<span class="text">登录 / 注册</span></a> </div>')
        }else{//已经登陆.带着登陆信息到后端加载用户头像
            console.log('success1');
            $.ajax({
                type:"GET",
                url:"/load/Image",
                data:{username:username},
                success:function (data) {
                    $('#user-info').empty();
                    $('#nav-submit').empty();
                    for(var i=0;i<data.length;i++) {
                        $('#user-info').append('<div class="nav-user more-active">' +
                            '<a href="#" class="avatar">' +
                            '<img src="'+data[i].userAvatar+'" alt="">'+
                            '</a>' +
                            '<div class="drop-down-list">' +
                            '<a href="/myIndex/message?username='+username+'">' +
                            '<span class="text">个人主页</span>' +
                            '</a>' +
                            '<a href="#">' +
                            '<span class="text">退出登陆</span>' +
                            '</a>' +
                            '</div>' +
                            '</div>')
                        if(data[i].identify===-1){//不是作者
                            $('#nav-submit').append(` <a href="transtition.jsp" class="lnk-start-publish fill-current-color">成为作者</a>`)
                        }else{
                            $('#nav-submit').append(` <a href="authorIndex.jsp" class="lnk-start-publish fill-current-color">作者空间</a>`)
                        }

                    }
                },
                error:function (error){
                    console.log(error);
                }
            })
        }
    })
</script>
</html>